<app-navbar [title]="fileName" [showUploadButton]="true"
            [showDownloadButton]="true" (downloadJsonClick)="onDownloadJsonClicked()"
            [showGetLinkButton]="true" (saveFileClick)="onSaveFileClicked()"></app-navbar>
<div class="row-layout_2 row">
  <div class="column-layout column">
    <igx-spreadsheet #spreadsheet height="100%" width="100%" style="background-color: white;"
                     (activeTableChanged)="onActiveTableChanged($event.args)"
                     (activeWorksheetChanged)="onActiveWorksheetChanged($event.args)"
                     (ActionExecuted)="onActionExecuted($event.args)"
                     (editModeExited)="onEditModeExited()"></igx-spreadsheet>
  </div>
  <div class="column-layout column">
    <app-code-editor [code]="code" style="height: 100%; width: 100%;"></app-code-editor>
  </div>
</div>
<igx-dialog [closeOnOutsideSelect]="true" [closeOnEscape]="true" #dialogWindow>
  <div>
    <div class="column-layout_2 column">
      <div class="row-layout_1 row">
        <igx-avatar shape="circle" color="hsl(var(--ig-grays-800))" bgColor="hsl(var(--ig-primary-500))" size="small" icon="{{ shareLink !== '' ? 'check' : 'save' }}" class="avatar"></igx-avatar>
        <h5 class="title_1">{{dialogWindowTitle}}</h5>
      </div>
      <div class="row-layout row" *ngIf="shareLink !== ''">
        <igx-input-group type="box" placeholder class="input-group">
          <input type="text" id="shareLinkInputField" [required]="false" [disabled]="false" readonly="true" igxInput [value]="shareLink" />
        </igx-input-group>
        <button (buttonClick)="onCopyShareLinkClicked()" igxButton="raised" igxRipple [disabled]="false" [igxToggleAction]="dialogWindow" class="button_1">
          <span>COPY</span>
        </button>
      </div>
    </div>
  </div>
</igx-dialog>
<igx-dialog #loadingDialog [closeOnOutsideSelect]="false" [closeOnEscape]="false">
  <div class="column-layout_2 column" style="align-items: center;">
    <h5 class="title_1">Loading File...</h5>
    <igx-icon font="material" [active]="true" class="loading-icon">donut_large</igx-icon>
  </div>
</igx-dialog>
